<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
  <title>投资游戏</title>
  <link rel="stylesheet" href="./css/index.css">
<style>
	body {
		background-color: #fff;
	}
	.size1 {
		font-size: 11px;
		color: blue;
	}
	
	.zhuJinE {
		color: red;
		font-size: 24px;
	}
</style>
</head>
<body>
<div id="app">
	
	<van-cell-group>
		<van-cell>
			<van-col span="24">
				<div align="center">
					<!--基金买卖-->
				</div>
			</van-col>
			<van-col span="24">
				<div align="center">
					{{ jjName }}
				</div>
			</van-col>
		</van-cell>
		<van-cell>
			<van-row>			
				<van-col span="24" align="left">
					基金代码:  {{ jjCode }}
				</van-col>
			</van-row>
			<van-row> 
				<br>
			</van-row> 
			<van-row>
				<van-col span="24" align="center">
					金额 <span class="zhuJinE">
						{{ chiYouJinE }}
					</span>（元）
				</van-col>
			</van-row>
			<van-row>
				<van-col span="8" align="center">
					昨日收益
				</van-col>
				<van-col span="8" align="center">
					持有收益
				</van-col>
				<van-col span="8" align="center">
					持有收益率
				</van-col>
			</van-row>
			<van-row>
				<van-col span="8" align="center">
					{{ zuoRiShouYi }}
				</van-col>
				<van-col span="8" align="center">
					{{ chiYouShouYi }}
				</van-col>
				<van-col span="8" align="center">
					{{ chiYouShouYiLv }}
				</van-col>
			</van-row>
		</van-cell>
		<van-cell>
			<van-row>
				<van-col span="12">
					持有金额 {{ chiYouJinE2 }}
				</van-col>
				<van-col span="12">
					待确认金额 {{ daiQueRenJinE }}
				</van-col>
			</van-row>
			<van-row>
				<van-col span="12">
					持仓成本价 {{ chiCangChengBen }}
				</van-col>
				<van-col span="12">
					持有份额 {{ chiYouFenE }}
				</van-col>
			</van-row>
			<van-row>
				<van-col span="12">
					日涨跌幅 {{ riZhangDieFu }}
				</van-col>
				<van-col span="12">
					当前基金净值 {{ dangQianJiJinJingZhi }}
				</van-col>
			</van-row>
		</van-cell>
		<van-cell>
			<van-row>
				<van-col span="8" align="center">
					<van-button type="info" size="small">收益明细</van-button>
				</van-col>
				<van-col span="8" align="center">
					<van-button type="info" size="small">交易记录</van-button>
				</van-col>
				<van-col span="8" align="center">
					<van-button type="info" size="small">我的定投</van-button>
				</van-col>
			</van-row>
		</van-cell>
		<van-cell>
		<hr>
		</van-cell>
		<van-cell> 
			<van-tabs v-model="tablActiove">
				<van-tab title="累计盈亏">
					累计盈亏图
					<br>
					<br>
					<br>
					<br>
					<br>
				</van-tab> 
				<van-tab title="业绩走势">
					业绩走势图
					<br>
					<br>
					<br>
					<br>
					<br>
					
					<van-row>
						<van-col span="8" align="center">
							<van-button type="default" size="mini">近1月</van-button>
						</van-col>
						<van-col span="8" align="center">
							<van-button type="default" size="mini">近3月</van-button>
						</van-col>
						<van-col span="8" align="center">
							<van-button type="default" size="mini">近6月</van-button>
						</van-col>
						<!-- 
						<van-col span="6" align="center">
							<van-button type="default" size="mini">近1年</van-button>
						</van-col>
						-->
					</van-row>
					
				</van-tab> 
				<van-tab title="行情分析">
					净值估算图
					<br>
					<br>
					<br>
					<br>
					<br>
				</van-tab> 
			</van-tabs>
		</van-cell>
		<van-cell>
		
		</van-cell>
		<van-cell>
			<van-row>
			<van-col span="12" align="left">
				<van-button type="primary" 
					@click="goToBuySellPage('B')">
					买入
				</van-button>
			</van-col>
			<van-col span="12" align="right">
				<van-button type="primary" 
					@click="goToBuySellPage('S')">
					卖出
				</van-button>
			</van-col>
			</van-row>
		</van-cell>
		
		<van-cell>
			<van-row>
				<br>
				<br>
			</van-row>
		</van-cell>

	
	</van-cell-group>
	<van-tabbar v-model="subActive" @change="onChange">
	  <van-tabbar-item icon="home-o">首页</van-tabbar-item>
	  <van-tabbar-item icon="search">基金</van-tabbar-item>
	  <van-tabbar-item icon="friends-o">买卖</van-tabbar-item>
	  <van-tabbar-item icon="setting-o">消息</van-tabbar-item>
	  <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
	</van-tabbar>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script src="./js/vant.min.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/echarts.js"></script>
<script src="./js/pouchdb-8.0.1.min.js"></script>

<script src="./utils.js"></script>

<script type="text/javascript">


	new Vue({
		el: '#app',
		data() {
			return {
				aaa: 'abc',
				jjName: '酒类ETF',
				jjCode: '0025588',
				chiYouJinE: '0',
				zuoRiShouYi: '0',
				chiYouShouYi: '0',
				chiYouShouYiLv: '0',
				chiYouJinE2: '0',//持有金额
				daiQueRenJinE: '0',//待确认金额
				chiCangChengBen: '0',//持仓成本价
				chiYouFenE: '0',//持有份额
				riZhangDieFu: '0',//日涨跌幅
				dangQianJiJinJingZhi: '0',//当前基金净值
				curPrice: 0,
				active: 0,
				subActive: 2,
				tablActiove:0,
				uitls: null
			};
		},
		created: function(){
			console.log('created');
			vant.Toast('基金买卖');
			this.initData();
		},
		methods: {
			initData(){//初始化数据
				console.log("initData");
				
                this.jjName = sessionStorage.getItem("baseName1");
				this.uitls = new Utils();
				
				this.dangQianJiJinJingZhi = sessionStorage.getItem("curPrice");
				console.log("this.dangQianJiJinJingZhi-=>",this.dangQianJiJinJingZhi)
				
				//显示基金代码
				/*
				console.log("uitls.getJJCode-=>",
					this.uitls.getJJCode(this.jjName)
				);
				*/
				this.jjCode = this.uitls.getJJCode(this.jjName);
				
				//显示昨日收益，持有收益，持有收益率
				this.showZRCYlv();
				
				
				//显示待确认金额，持仓成本价
				this.showQueRenJinEAndChengBen();
				
				//显示日涨跌幅
				this.showJinRiZhangDie();
				
				//显示当前基金净值
				this.showCurJJValue();
				
				//显示累计盈亏图
				this.showLeiJiYingKuiTu();
				
				//显示业绩走势图
				
				
				//显示行情分析-净值估算图
				
				//显示持仓成本
				this.showChiCangChengBen();
				//显示持有金额，持有份额，
				this.showAcountNumber();
				
				
			},
			showChiCangChengBen(){//显示持仓成本
				console.log("showChiCangChengBen");
			
			
			
			},
			goToBuySellPage(e){ //打开买卖页面
				console.log("goToBuySellPage()",e);
				
				if(e=='S'){
					sessionStorage.setItem("chiYouFE",this.chiYouFenE)
					location.href = './sellPage.html'
					return
				}
				
				location.href = './buySellPage.html';
			},
			showLeiJiYingKuiTu(){
				console.log("showLeiJiYingKuiTu()");
				
			},
			showCurJJValue(){//显示当前基金净值
				console.log("showCurJJValue()");
				console.log("this.dangQianJiJinJingZhi-=>",this.dangQianJiJinJingZhi);
				
				
			},
			showJinRiZhangDie(){
				console.log("showJinRiZhangDie()");
				
			},
			showQueRenJinEAndChengBen(){//显示待确认金额，持仓成本
				console.log("showQueRenJinEAndChengBen()");
				
				// buyHisList
				//[{"酒类ETF":"0.1523,2220"},{"稀土ETF":"0.9349,3210"},{"酒类ETF":"0.1448,1213"}]
				let bhl1 = localStorage.getItem("buyHisList")
				console.log("bhl1-=>",bhl1);
				if (bhl1 == null || bhl1 == undefined || bhl1 == '') {
					this.chiCangChengBen = 0
					this.chiYouFenE = 0;
				}else{
					let arrA1 = JSON.parse(bhl1)
					console.log("arrA1-=>",arrA1);
					//this.jjName
					/*Object.keys(objA1).forEach(key => {
					  console.log(`${key}: ${objA1[key]}`);
					})*/
					let numDSFA2 = 0
					let numJKLH3 = 0
					let cyfe1 = 0
					for(let item1a of arrA1) {
						//console.log("item1a-=>",item1a);
						if(item1a[''+this.jjName]){
							console.log("item1a-=>",item1a);
							let strAADF1 = item1a[''+this.jjName]
							let arrJLJ2 = strAADF1.split(',')
							//console.log(arrJLJ2[0]);
							//console.log(arrJLJ2[1]);
							/**/
							cyfe1 += parseFloat(arrJLJ2[2])
							if( parseFloat(arrJLJ2[1]) < 0 ){ 
								continue
							}
							let numADFA2 = arrJLJ2[0] * arrJLJ2[1]
							numDSFA2 += parseInt(arrJLJ2[1])
							numJKLH3 += parseFloat(numADFA2) 
						}
					}
					console.log("numDSFA2-=>",numDSFA2);
					console.log("numJKLH3-=>",numJKLH3);
					console.log("cyfe1-=>",cyfe1);
					let num3a = numJKLH3 / numDSFA2
					console.log("num3a-=>",num3a);
					let num4a = num3a.toFixed(4)
					this.chiCangChengBen = num4a
					
					this.chiYouFenE = cyfe1.toFixed(2);
				}
/*
当前 份额 花费
1.00 100 100
1.20 100 120

220 / 200

*/				
				
				
				
			},
			showAcountNumber(){//显示持有金额，持有份额
				console.log("showAcountNumber() start");
				//buyDic1:"{"酒类ETF":2450,"食品ETF":"440"}"
				let tmp1 = localStorage.getItem("buyDic1")
				if (tmp1 == null || tmp1 == undefined || tmp1 == ''){
					return
				}else{
					let json1 = JSON.parse(tmp1)
					let fenE1 = json1[''+this.jjName]
					if (fenE1 == null || fenE1 == undefined || fenE1 == "") {
						return;
					}else{
						//this.chiYouFenE = this.getFenE1();
						
						let cyje2 = this.chiYouFenE * 
							this.dangQianJiJinJingZhi
						//this.chiYouJinE2.toFixed(2)
						this.chiYouJinE2 = cyje2.toFixed(2)
						this.chiYouJinE = this.chiYouJinE2
					}
				}
				//chiYouFenE
				console.log("showAcountNumber() end");
			},
			getFenE1(){
				console.log("getFenE1");
				let etfName = this.jjName;
				let bhl2 = localStorage.getItem("buyHisList")
				if(bhl2){
					let arrBhl1 = JSON.parse(bhl2);
					for(itemb1 of arrBhl1){
						console.log("itemb1-=>",itemb1);
						if(itemb1[''+etfName]){
							let obj3 = itemb1[''+etfName]
							console.log("obj3-=>",obj3);
						}
					}
				}else{
					return 0;
				}
			},
			showZRCYlv(){//显示昨日收益，持有收益，持有收益率
				console.log("showZRCYlv()");
				
				
			},
			click1() {
				window.location.href = "a2.html";
			},
			onChange(index){
				vant.Toast('提示:'+index);
				//vant.Notify({type:'primary',message:index});
				console.log("index-=>",index);
				if(index===0){
					window.location.href = 'gpIndex.html';
				}else if(index===1){
					window.location.href = 'alljjList.html';
				}else if(index===2){
					window.location.href = 'buySell.html';
				}else if(index===3){
					window.location.href = 'msgNotify.html';
				}else if(index===4){
					window.location.href = 'myInfo.html';
				}
			},
		}
	});

</script>
</html>